<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0
        }
        body{
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        #aaa{
            background: #ccc;
        }

    </style>
</head>
<body >
    <canvas id="aaa"></canvas>
</body>
</html>
<script>
    var aaa = document.querySelector('#aaa')
    var context = aaa.getContext('2d')
    
    aaa.width = document.documentElement.clientWidth
    aaa.height = document.documentElement.clientHeight

    // 创建一个img对象的孤儿节点
    var img = new Image()
    img.src = 'img/8001.png'
    // 一定要等到这个图片loading之后，然后渲染
    img.onload = function () {
        // ctx.drawImage(图片对象，图片在画布上的左边x，图片在画布上的左边y，图片宽，图片高)
        context.drawImage(img, 100,     0, 100, 100);

        // 切片，只显示图片的一部分
        // context.drawImage(img, 切片坐标x, 切片坐标y, 宽度, 高度, 切片后放置坐标x, 切片后放置坐标y, 切片后宽, 切片后高);
        context.drawImage(img, 150, 100, 50, 50, 100, 100, 50*2, 50*2);
    }

	console.log(aaa.toDataURL())
	console.log(aaa)

    var aaa = new Image()
    // aaa.src = 'img/拳皇.png'
    aaa.src = 'img/火影.png'
    aaa.onload = function(){
        var imgW = aaa.width
        var imgH = aaa.height
        var w = imgW/4
        var h = imgH/4
        var x = 0
        var n = 0
        var interval = setInterval(()=>{
            context.clearRect(0, 200, 10000, h);
            n++
            if (n >3) {
                n = 0
            }
            x+=5
            context.drawImage(aaa, w*n, h*2, w, h, x, 200, w, h);
            // 走到头自动停止，并通过 n 确定当前图片动作
            if(x>=document.documentElement.clientWidth - w){
                clearInterval(interval)
                context.clearRect(0, 200, 10000, h);
                n = 1
                context.drawImage(aaa, w*n, h*2, w, h, x, 200, w, h);
            }
        },100)
    }
</script>